<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];
const images = [

    "http://api.ddhk.net/storage/images/13/agency_quick_couplings/20250912091926493021.jpg",
    "http://api.ddhk.net/storage/images/13/agency_quick_couplings/20250912091929135689.jpg",
    "http://api.ddhk.net/storage/images/13/agency_quick_couplings/20250912091932193021.jpg",
    "http://api.ddhk.net/storage/images/13/agency_quick_couplings/20250912091935934596.jpg"

];

</script>
<template>
    

    <div class="container">

        <div class="head-txt-img">

            <div class="head-txt">
                <div class="banner__upper">
            <span class="banner__label">Agency Products</span>
            <h3 class="banner__title">Quick Couplings</h3>
        </div>
                <p>
                    High quality and highly competitive prices, with anextremely high cost performance.
                </p>
            </div>
            <div class="img">
                <img src="http://api.ddhk.net/storage/images/13/agency_quick_couplings/20250912092109924253.jpg" alt="">
            </div>
        </div>

    </div>

    

    <div class="container lunbo">
        <!-- 这里轮播图 -->
        <Swiper :loop="true">

            <SwiperSlide v-for="(item, index) in images" :key="index">

                <img :src="item" class="slide-image" alt="轮播图" />

            </SwiperSlide>


        </Swiper>

    </div>

    
</template>    

<style lang="less">


.head-txt-img {

    display: flex;
    flex-direction: row;
    align-items: center;

    border-bottom: solid 20px #004d7b;

    justify-content:space-between;

    .head-txt {}

    .img {

        // width:400%;
        img {
            max-width: 550px;
        }

    }
}

.zhibiao {

    .con {
        font-size: 14px;
        line-height: 1.5;
    }


    .head {

        background-color: #004d7b;
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.5;
    }

}

.features {

    h3 {
        border-bottom: solid 1px;
        line-height: 3;
        font-size: 2.2rem;
        margin-bottom: 0;
    }

    p {
        line-height: 1.5;
    }
}
</style>

<style>
.swiper{
    
    width:800px;
    max-width:100%;
    height: 400px;
    margin: 50px auto;

}
.slide-image {

width: 100%;
height: 100%;
object-fit: cover;
/*图片自适应容器，保持比例*/

}
</style>